<script setup>
import {ref, computed, watch, inject, onMounted} from 'vue';
const props = defineProps({
    // 选项值
    value: {
        type: String,
        default: 'on'
    },
    // 当前是否选中
    modelValue: {
        type: Boolean,
        default: false
    }
})
const emit = defineEmits([
    'update:modelValue'
]);
// 通知挂载成功方法
const notifyMounted = inject('notifyMounted', null);
// 通知选中方法
const notifyChecked = inject('notifyChecked', null);
const checked = ref(props.value == props.modelValue);
// 监听外面更改事件
watch(() => props.modelValue, (newValue) => {
    checked.value = !!newValue;
})
// 监听选择变化
watch(checked, (newValue) => {
    if(newValue){
        emit('update:modelValue', props.value);
        notifyChecked && notifyChecked(props.value);
    }else{
        emit('update:modelValue', '');
    }
})
const classList = computed(() => {
    const list = [];
    checked.value && list.push('active');
    return list;
})
onMounted(() => {
    notifyMounted && notifyMounted(props.value, (status) => {
        checked.value = status;
    });
})
</script>
<template>
    <div class="ld-radio" :class="classList">
        <div class="ld-radio-target">
            <input class="ld-radio-input" type="radio" :value="value" v-model="checked">
            <span class="ld-radio-inner"></span>
        </div>
        <span class="ld-radio-content">
            <slot></slot>
        </span>
    </div>
</template>
<style lang="scss">
$normal-border-color: #d9d9d9;
$normal-font-color: #606266;
$normal-active-border-color: #409eff;
:root{
    --ld-radio-border-color: #{$normal-border-color};
    --ld-radio-font-color: #{$normal-font-color};
    --ld-radio-target-inner-bg-color: #fff;
    --ld-radio-target-inner-center-bg-color: #fff;
}
.ld-radio{
    display: inline-flex;
    align-items: center;
    color: var(--ld-radio-font-color);
    .ld-radio-target{
        position: relative;
        width: 18px;
        height: 18px;
        border-radius: 50%;
        .ld-radio-input{
            position: absolute;
            left: 0;
            top: 0;
            margin: 0;
            width: 100%;
            height: 100%;
            opacity: 0;
            z-index: 2;
        }
        .ld-radio-inner{
            position: absolute;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            border: 1px solid var(--ld-radio-border-color);
            border-radius: 50%;
            line-height: 22px;
            background: var(--ld-radio-target-inner-bg-color);
            box-sizing: border-box;
            z-index: 1;
            &::after{
                content: "";
                position: absolute;
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%);
                width: 5px;
                height: 5px;
                border-radius: 50%;
                background: var(--ld-radio-target-inner-center-bg-color);
            }
        }
    }
    .ld-radio-content{
        padding: 0 6px;
    }
    &.active{
        --ld-radio-border-color: #{$normal-active-border-color};
        --ld-radio-target-inner-bg-color: #{$normal-active-border-color};
        --ld-radio-font-color: #{$normal-active-border-color};
    }
}
</style>